<template>
  <a-card>
    <a-form>
      <a-form-item>
        <a-button type="primary" style="margin-top: 20px" @click="showDialog = true">
          添加停车计费规则</a-button
        >
      </a-form-item>
    </a-form>

    <a-table
      size="small"
      :dataSource="rows"
      :columns="columns"
      :pagination="{
        // 分页数据
        total: total,
        current: params.page,
        'show-total': showTotal,
        showQuickJumper: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        pageSize: params.pageSize,
        onChange: changeCurrent,
        'show-size-changer': true
      }"
    >
      <template #bodyCell="{ column, record }">
        <!-- 判断是不是操作列 -->
        <template v-if="column.dataIndex === 'operate'">
          <a-space size="large">
            <a-button type="primary" @click="editRules(record.id)">编辑</a-button>
            <!-- <a-popconfirm title="确认删除该记录吗" @confirm="delPropertyfeeAPI(record.id)"> -->
            <a-button type="primary" danger @click="delRulesAPI(record.id)">删除</a-button>
            <!-- </a-popconfirm> -->
          </a-space>
        </template>

        <template v-if="column.dataIndex === 'chargeType'">
          <template v-if="record.chargeType === 'duration'">时长收费</template>
          <template v-else-if="record.chargeType === 'turn'">按次收费</template>
          <template v-else>分段收费</template>
        </template>
      </template>
    </a-table>
  </a-card>

  <add-edit
    :currentId="currentId"
    ref="addUserRef"
    v-model:showDialog="showDialog"
    @addSuccess="getRulesAPI"
    @clearId="currentId = null"
  ></add-edit>
</template>
<script setup>
import { hint } from '@/hooks/hint.js'
import { ref, onMounted, reactive } from 'vue'
import { getRules, delRules } from '@/api/billingrule.js'
import AddEdit from './components/add-edit.vue'
const columns = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '计费规则编号',
    dataIndex: 'ruleNumber'
  },
  {
    title: '计费规则名称',
    dataIndex: 'ruleName'
  },
  {
    title: '免费时长（分钟）',
    dataIndex: 'freeDuration'
  },
  {
    title: '收费上限（元）',
    dataIndex: 'chargeCeiling'
  },
  {
    title: '计费方式',
    dataIndex: 'chargeType'
  },
  {
    title: '计费规则',
    dataIndex: 'ruleNameView'
  },
  {
    title: '操作',
    dataIndex: 'operate'
  }
]
const rows = ref([]) //分页数据
const total = ref(null) //页总数
const showDialog = ref(false) //显示查看弹窗
const currentId = ref(null) // 定义传值的id
const params = reactive({
  page: '1', //当前页码默认是
  pageSize: '10' //页面大小，默认是10
}) //分页请求的必需

onMounted(async () => {
  // 表示 首次渲染已经完成
  await getRulesAPI()
})

//查询列表
const getRulesAPI = async () => {
  const res = await getRules(params)
  rows.value = res.data.rows.map((el, index) => ({ ...el, index: index + 1 }))
  console.log(rows.value)
  total.value = res.data.total
}
//改变页数
const changeCurrent = async (page, pageSize) => {
  params.page = page
  params.pageSize = pageSize
  await getRulesAPI()
}
const showTotal = () => {
  return `总共${total.value}条`
}
// 删除
const delRulesAPI = async (id) => {
  const { Confirm, msg } = hint()
  try {
    await Confirm('是否确认删除当前计费规则？')
    console.log(id)
    await delRules(id)
    msg('success', '删除用户成功')
    await getRulesAPI()
    console.log('1')
  } catch (e) {
    console.log(e)
  }
}
const editRules = (id) => {
  // showDialog.value = true // 显示弹层
  // 第一种 父组件调用子组件的方法
  // addUserRef.value?.getUserDetail(id)
  // 第二种 props传值把id传过去 watch监听 id的变化 获取详情
  currentId.value = id
}
</script>
